<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <!-- <style>
        body div:nth-of-type(2)
        {
            color: red;
        }
    </style> -->
</head>
<body>
    <div id="box">
        box1
        <span>123</span>
    </div>
    <div>
        box2
    </div>
</body>
<script type="text/javascript">
    //a.append(b)  将a插到b子元素的末尾
    // $("<h2>Hello world!</h2>").appendTo("div");
    //a.prependTo(B)  将a插到b的子元素的第一个
    // $("<h2>Hello world!</h2>").prependTo("#box");

    //a.insertAfter(b)  将a插到b的后面【作为同级元素】
    $("<h2>Hello world!</h2>").insertAfter("#box");

    $("<h2>Hello wor12ld!</h2>").insertBefore($("div:nth-of-type(2)"));


    //a.replaceWith(b)  用b替换掉a
    $("#box").replaceWith("<h2>Hello world!</h2>");

    //a.replaceAll(b)  用a全部替换掉所有的b
    $("<h3>linux</h3>").replaceAll("div");

    //a.remove()   删除标签 所有的
    // $("h2").remove();
    // a.empty()   只删除标签中的内容，包括子标签 
    $("h2").empty();
</script>
</html>